<template>
	<view>
		<view class="my-order">
			<view class="header bg-color">
				<view class="picTxt acea-row row-between-wrapper">
					<view class="text">
						<view class="name">订单管理</view>
						<view>订单总数：{{ count }} 订单金额：￥{{ stat[1].count }}</view>
					</view>
					<view class="pictrue">
						<!-- <image src="../../../static/images/orderTime.png"></image> -->
					</view>
				</view>
			</view>
<!-- 			<view class="nav acea-row row-around">
				<view class="item" :class="orderStatus == 0 ? 'on' : ''"  @click="statusClick(0)">
					<view>待发货</view> 
				</view>
				<view class="item" :class="orderStatus == 1 ? 'on' : ''" @click="statusClick(1)">
					<view>待收货</view> 
				</view>
				<view class="item" :class="orderStatus == 2 ? 'on' : ''" @click="statusClick(2)">
					<view>待评价</view> 
				</view>
				<view class="item" :class="orderStatus == 3 ? 'on' : ''" @click="statusClick(3)">
					<view>退/换货</view> 
				</view>
				<view class="item" :class="orderStatus == 4 ? 'on' : ''"  @click="statusClick(4)">
					<view>已完成</view> 
				</view>
			</view> -->
			<!-- 搜索 -->
			<view class="search_order">
				<input class="search_inp" type="text" placeholder="输入订单号或收货人姓名查询" v-model="realName">
				<text class="search_btn" @click="getRealName">搜索</text>
			</view>
			<view class="list" v-if="newOrderList.length>0">
				<view class="item" v-for="(val, index) in newOrderList" :key="index">
					<view @click="goOrderDetails(val.id)">
						<view class="title acea-row row-between-wrapper">
							<view class="acea-row row-middle">
								<view>{{ val.addTime }}</view>
							</view>  
							<!-- {{val.status}}/{{ val.refund_status }} -->
							<view v-if="val.status == 0" class="font-color">未支付</view> 
							<view v-if="val.status == 1" class="font-color">未发货</view> 
							<view v-if="val.status == 2" class="font-color">待收货</view> 
							<view v-if="val.status == 3" class="font-color">待评价</view> 
							<view v-if="val.status == 4" class="font-color">交易完成</view> 
							<view v-if="val.status == 5" class="font-color">待核销</view> 
							<view v-if="val.status == 7 && val.asd == 1" class="font-color">退款中</view> 
							<view v-if="val.status == 7 && val.asd == 2" class="font-color">已退款</view> 
							<view v-if="val.status == -4" class="font-color">已删除</view> 
						</view>
						
						<view class="item-info acea-row row-between row-top"> 
							<view class="pictrue">
								<image :src="val.image"></image>
							</view>
							<view class="text acea-row row-between">
								<view class="name line2">{{val.storeName }}</view>
								<view class="money">
									<view >￥{{val.price }}</view> 
									<view>x{{val.cartNum }}</view>
								</view>
							</view>
						</view>
						<!-- <view class="totalPrice">
							共{{ item.cartInfo.length || 0 }}件商品，总金额
							<text class="money font-color">￥{{ item.pay_price }}</text>
						</view> -->
					</view>
					<view class="bottom acea-row row-right row-middle">
						<view class="bnt cancelBnt"  @click="cancelOrder(index, val.id,val.orderId)">查看详情</view> 
					</view>
				</view>
			</view>
			<view class="loadingicon acea-row row-center-wrapper" v-if="orderList.length > 0">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				{{ loadTitle }}
			</view>
			<view v-if="orderList.length == 0">
				<emptyPage title="暂无订单~"></emptyPage>
			</view>
		</view>
		<view class="noCart" v-if="orderList.length == 0 && page > 1">
			<view class="pictrue">
				<image src="/images/noOrder.png"></image>
			</view>
		</view>
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<home></home>
		<!-- <payment :payMode="payMode" :pay_close="pay_close" @onChangeFun="onChangeFun" :order_id="pay_order_id" :totalPrice="totalPrice"></payment> -->
	</view>
</template>

<script> 
	import {sellorderInfos} from '../../../utils/filterData.js'
	import {
		getMyOrder,
		getAllChart,
		getMyOrders
	} from '../../../api/sellOrder.js'

	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		openOrderSubscribe
	} from '@/utils/SubscribeMessage.js';
	import home from '@/components/home';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		components: {
			home,
			emptyPage,
			// #ifdef MP
			authorize
			// #endif
		},
		data() {
			return {
				stat:[],
				count: 0,
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
				orderStatus:0, // 高亮状态
				orderList: [], //订单数组  
				realName:'', // 查询订单
				page: 1,
				limit: 20,
				payMode: [{
						name: '微信支付',
						icon: 'icon-weixinzhifu',
						value: 'weixin',
						title: '微信快捷支付'
					},
					// {
					// 	name: '余额支付',
					// 	icon: 'icon-yuezhifu',
					// 	value: 'yue',
					// 	title: '可用余额:',
					// 	number: 0
					// }
				],
				pay_close: false,
				pay_order_id: '',
				totalPrice: '0',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false ,//是否隐藏授权
				newOrderList: [] // 新数据结构
			};
		},
		computed: mapGetters(['isLogin']),
		onShow() {
			if (this.isLogin) {
				this.getMyOrder()
				// this.getAllChart()
			} else {
				toLogin();
			}
		},
		mounted() {  
		},
		methods: {
			// 获取卖出订单
			getMyOrder() {
				let that = this
				getMyOrder().then(res => { 
					if (res.data.status == 200) {  
						if(res.data.result.data.length == 0){
							 this.$util.Tips({
								title: '暂无数据'
							});
							return setTimeout(() => {
								uni.switchTab({
									url: '../../user/index'
								})
							},1000)
						}
						that.orderList = res.data.result.data    
						that.count = res.data.result.count 
						that.stat = res.data.result.stat
						let newOrderList = new sellorderInfos(res.data.result.data)  
						that.newOrderList = newOrderList.newOrderList 
					} else {
						 this.$util.Tips({
							title: res.msg
						}); 
						setTimeout(() => {
							uni.switchTab({
								url: '../../user/index'
							})
						},1000)
					}
				})
			}, 
			// 查看订单详情
			cancelOrder(index,id){ 
				uni.navigateTo({
					url:'./orders_details/index?id=' + id 
				})
			},  
			// 切换状态查看不同订单
			statusClick(num){ 
				this.orderStatus = num
			}, 
			// 获取订单数据
			getRealName(){ 
				getMyOrders(this.realName).then(res => {  
					if(res.data.status == 200){
						if(res.data.result.data.length >0  ){ 
							let newOrderList = new sellorderInfos(res.data.result.data)
							this.newOrderList = newOrderList.newOrderList  
						}else{
							return this.$util.Tips({
								title: '暂无数据'
							});
						}
						 
					}else{ 
						return this.$util.Tips({
							title: res.msg
						});
					}
				})
			}
				 
		}
	};
</script>

<style scoped lang="scss">
	.my-order .header {
		height: 260rpx;
		padding: 0 30rpx;
	}

	.my-order .header .picTxt {
		height: 190rpx;
	}

	.my-order .header .picTxt .text {
		color: rgba(255, 255, 255, 0.8);
		font-size: 26rpx;
		font-family: 'Guildford Pro';
	}

	.my-order .header .picTxt .text .name {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 20rpx;
	}

	.my-order .header .picTxt .pictrue {
		width: 122rpx;
		height: 109rpx;
	}

	.my-order .header .picTxt .pictrue image {
		width: 100%;
		height: 100%;
	}

	.my-order .nav {
		background-color: #fff;
		width: 690rpx;
		height: 140rpx;
		border-radius: 6rpx;
		margin: -73rpx auto 0 auto;
	}

	.my-order .nav .item {
		text-align: center;
		font-size: 26rpx;
		color: #282828;
		padding: 29rpx 0;
	}

	.my-order .nav .item.on {
		font-weight: bold;
		border-bottom: 5rpx solid #e93323;
	}

	.my-order .nav .item .num {
		margin-top: 18rpx;
	}

	.my-order .list {
		width: 690rpx;
		margin: 14rpx auto 0 auto;
	}

	.my-order .search_order {
		padding: 20rpx 30rpx;
		display: flex;
		height: 120rpx;
		font-size: 30rpx;
		color: #e93323;
		line-height: 70rpx;

		.search_inp {
			margin-right: 80rpx;
			padding-left: 60rpx;
			width: 70%;
			height: 70rpx;
			color: #333;
			font-size: 28rpx;
			border-radius: 30rpx;
			background-color: #fff;
		}
	}

	.my-order .list .item {
		background-color: #fff;
		border-radius: 6rpx;
		margin-bottom: 14rpx;
	}

	.my-order .list .item .title {
		height: 84rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #282828;
	}

	.my-order .list .item .title .sign {
		font-size: 24rpx;
		padding: 0 7rpx;
		height: 36rpx;
		margin-right: 15rpx;
	}

	.my-order .list .item .item-info {
		padding: 0 30rpx;
		margin-top: 22rpx;
	}

	.my-order .list .item .item-info .pictrue {
		width: 120rpx;
		height: 120rpx;
	}

	.my-order .list .item .item-info .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.my-order .list .item .item-info .text {
		width: 486rpx;
		font-size: 28rpx;
		color: #999;
		margin-top: 6rpx;
	}

	.my-order .list .item .item-info .text .name {
		width: 306rpx;
		color: #282828;
	}

	.my-order .list .item .item-info .text .money {
		text-align: right;
	}

	.my-order .list .item .totalPrice {
		font-size: 26rpx;
		color: #282828;
		text-align: right;
		margin: 27rpx 0 0 30rpx;
		padding: 0 30rpx 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.my-order .list .item .totalPrice .money {
		font-size: 28rpx;
		font-weight: bold;
	}

	.my-order .list .item .bottom {
		height: 107rpx;
		padding: 0 30rpx;
	}

	.my-order .list .item .bottom .bnt {
		width: 176rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		border-radius: 50rpx;
		font-size: 27rpx;
	}

	.my-order .list .item .bottom .bnt.cancelBnt {
		background-color: #e93323; 
		color: #fff;
	}

	.my-order .list .item .bottom .bnt~.bnt {
		margin-left: 17rpx;
	}

	.noCart {
		margin-top: 171rpx;
		padding-top: 0.1rpx;
	}

	.noCart .pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 78rpx auto 56rpx auto;
	}

	.noCart .pictrue image {
		width: 100%;
		height: 100%;
	}
</style>
